<template>
    <div class="message-box clearfix" >
        <div class="send-time">{{message.senderTime}}</div>
        <template v-if="message.isClient == true">
            <img ref="userImg" style="float:right;" :src="`https://oa.m.tencent.com/an:SSC_RTX/photo/100/${userInfo.EnglishName}.png`" @error="handleError">
        </template>
        <template v-else>
            <img style="float:left;" src="../assets/kefu.png">
        </template>

        <div :style="contentStyleObj" class="message-content" v-html="parsedHtml" @click="messageContentClick">
            <!-- {{message.content}} -->
        </div>
    </div>    
</template>
<script>
import * as tool from '../utils/tool.js'
import defaultImg from '../assets/user.png'
export default {
    data(){
        return {
            errorTimes:0
        }
    },
    props:{
        message:{
            isClient:false,
            content:[]
        },
        userInfo:{},
    },
    computed:{
        contentStyleObj() {
            let style = {
                'float':'left',
                'background-color':'#ffffff'
            }
            if (this.message.isClient === true) {
                style['float'] = 'right'
                style['background-color'] = '#95EC69'
            }
            return style
        }
    },
    data(){
        return {
            parsedHtml:''
        }
    },
    methods:{
        handleError(e) {
            console.log('头像出错啦');
            console.log(e);
            
            this.errorTimes++
            if (this.errorTimes==1) {
                this.$refs['userImg'].src = `https://oa.m.tencent.com/an:SSC_RTX/custom/100/${userInfo.EnglishName}.png`
            }else {
                this.$refs['userImg'].src = defaultImg
            }
        },
        parseMessage() {
            //根据isClient，有两种解析方式
            if (this.message.isClient === true) {
                if (this.message.content[0].type == 'rtx_text') {
                    // let reg = new RegExp('((ht|f)tps?:)\/\/[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|]','g') 
                    // let newHtml = this.message.content[0].rtx_text.text.replace(reg,'<a href="$&" _target="blank">$&</a>')
                    let addATag = tool.linkToATag(this.message.content[0].rtx_text.text)
                    let addEmoji = tool.resolveEmoji(addATag)
                    this.parsedHtml = addEmoji

                }else if(this.message.content[0].type == 'rtx_img') {
                    //这是图片的处理逻辑
                    this.parsedHtml = `<img style="max-width:150px;" preview="1" src="${this.message.content[0].rtx_img.url}">`
                }
                
            }else {
                let newHtml = ''
                this.message.content.forEach(item=>{
                    switch (item.type) {
                        case 'rtx_text':
                            newHtml += tool.linkToATag(tool.resolveEmoji(item.rtx_text.text))
                            break;
                        case 'rtx_app_text_link':
                            let link = ''
                            //转换成A标签,但是“是”，“否”这两个链接有点特殊
                            if (item.rtx_app_text_link.type == 0) {
                                if (item.rtx_app_text_link.url =='') {
                                    link = `<a key="${item.rtx_app_text_link.key}" href="javascript:void(0);">${item.rtx_app_text_link.text}</a><br>`
                                }else {
                                    link = `<a href="${item.rtx_app_text_link.url}">${item.rtx_app_text_link.text}</a>`
                                }
                            }else {
                                if (item.rtx_app_text_link.text =='是') {
                                    link = `<div></div><span key="${item.rtx_app_text_link.key}">&nbsp;&nbsp;{${item.rtx_app_text_link.text}}&nbsp;&nbsp;</span>&nbsp;`
                                }else if(item.rtx_app_text_link.text =='否'){
                                    link = `<span key="${item.rtx_app_text_link.key}">&nbsp;&nbsp;{${item.rtx_app_text_link.text}}&nbsp;&nbsp;</span>&nbsp;`
                                }
                                else {
                                    link = `<span style="font-size: 16px;" key="${item.rtx_app_text_link.key}">&nbsp;&nbsp;${item.rtx_app_text_link.text}&nbsp;&nbsp;</span>&nbsp;`
                                }
                            }
                            newHtml += link
                            break;
                        case 'rtx_img':
                            newHtml += `<img style="max-width:150px;" preview="1" src="${item.rtx_img.url}">`
                            break;
                        default:
                            alert('出现了新类型：'+item.type)
                            break;
                    }
                })
                
                // console.log(newHtml);
                this.parsedHtml = newHtml.replace(/\/an:ntsapps(_dev)?\/ts:/g,'http://')
                this.$previewRefresh()
            }
        },
        messageContentClick(e) {

            let node = e ? e.target : {};
            let key = node.getAttribute('key')

            if(node.tagName === "A" && key!=undefined) {
                console.log('showLinkDetail');
                this.$emit('showLinkDetail',key)
            }else if(node.tagName === "SPAN") {
                this.$emit('feeback',key)
            }
            console.log(node.tagName);
        }
    },
    mounted() {
        this.parseMessage()
        // console.log(this.message);
    }
}
</script>
<style lang="scss" scoped>
.message-box {
    // display: flex;
    font-size: 16px;
    color: #2D342A;
    padding-top: 10px;
    word-break: break-all;
    .send-time {
        font-size: 12px;
        color: 	#BEBEBE;
        text-align: center;
        padding: 5px 0px;
    }
    img {
        width: 40px;
        border-radius: 5px;
        padding: 0px 10px;
        box-sizing: content-box;
    }
    .message-content {
        padding: 5px 10px;
        max-width: calc(100% - 120px);
        border-radius: 2px;
    }
}
.clearfix {
    &::after {
        display:block;
        clear:both;
        content:"";
        visibility:hidden;
        height:0
    }
}
</style>
